import { onMounted } from 'vue'
const themeList = [
  { title: '深海蓝', name: 'light', color: '#0052d9' },
  { title: '天空蓝', name: 'lightblue', color: '#0894fa' },
  { title: '明亮黄', name: 'yellow', color: '#f3b814' },
  { title: '淡然紫', name: 'purple', color: '#7a5af8' },
  { title: '可爱粉', name: 'pink', color: '#ef45b3' },
  { title: '超甜橘', name: 'orange', color: '#f54343' },
  { title: '自然棕', name: 'brown', color: '#c9724f' },
  { title: '草色青', name: 'ching', color: '#27ba93' }
]
// 在APP组件设置主题，在任何页面刷新都能显示正常，避免出现在登录页面刷新无效的情况
export function useTheme () {
  let themeMode = localStorage.getItem('themeMode') || ''
  function setTheme (mode) {
    // 设置主题模式
    document.documentElement.setAttribute('theme-mode', mode)
    localStorage.setItem('themeMode', mode)
    themeMode = mode
  }
  onMounted(() => {
    if (themeMode) document.documentElement.setAttribute('theme-mode', themeMode)
  })
  return {
    currTheme: themeMode,
    setTheme,
    themeList
  }
}
